<template>
  <view class="operate_swiper">
    <ISwiper :swiperList="scorollDataList">
      <template #default="{ data }">
        <IRowCol :rowDataList="data.data">
          <template #default="{ row }">
            <view class="operate_row">
              <i class="svg-icon" :class="row.data.icon"></i>
              <view>{{ row.data.label }}</view>
            </view>
          </template>
        </IRowCol>
      </template>
    </ISwiper>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ISwiperInterface } from '#/swiper/ISwiperInterface';
import IRowCol from '@/components/container/IRowCol.vue';
import ISwiper from '@/components/swiper/ISwiper.vue';
const scorollDataList = ref<ISwiperInterface[]>([
  {
    data: [
      { data: { label: '测试133', icon: 'icon-river__easyiconnet2' } },
      { data: { label: '测试2', icon: 'icon-river__easyiconnet1' } },
      { data: { label: '测试3', icon: 'icon-park__easyiconnet' } },
      { data: { label: '测试4', icon: 'icon-reindeer__easyiconnet' } },
      { data: { label: '测试5', icon: 'icon-river__easyiconnet2' } },
      { data: { label: '测试6', icon: 'icon-shore__easyiconnet' } },
      { data: { label: '测试7', icon: 'icon-sydney_opera_house__easyiconnet' } },
      { data: { label: '测试9', icon: 'icon-lagoon__easyiconnet' } }
    ]
  },
  {
    data: [
      { data: { label: '测试11', icon: 'icon-sea__easyiconnet1' } },
      { data: { label: '测试12', icon: 'icon-lake__easyiconnet' } },
      { data: { label: '测试13', icon: 'icon-lake__easyiconnet1' } },
      { data: { label: '测试14', icon: 'icon-palace__easyiconnet' } },
      { data: { label: '测试15', icon: 'icon-river__easyiconnet3' } },
      { data: { label: '测试16', icon: 'icon-sea__easyiconnet' } },
      { data: { label: '测试17', icon: 'icon-mountain__easyiconnet' } },
      { data: { label: '测试19', icon: 'icon-hills__easyiconnet' } }
    ]
  }
]);
</script>

<style scoped>
.operate_swiper {
  height: 360rpx;
}
.operate_row {
  margin: 20rpx;
  text-align: center;
}
</style>
